<template>
  <div class="wh-shared" :class="{ active, out: !active }">
    <div class="wh-shared-right">
      <h3 class="fs48">共享文件，与同事同学</h3>
      <p class="fs48 mb40">共同展开工作</p>
      <ul>
        <li class="mb30">多人在线协作编辑文档，告别通过邮件、IM 软件多次传输文件的繁复</li>
        <li>翻译资料全面整合，方便管理回溯</li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import type { PropType } from 'vue'

export default defineComponent({
  name: 'shared',
  props: {
    active: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  }
})
</script>

<style scoped lang="scss">
@import '@/assets/scss/base.scss';

.wh-shared {
  width: 100%;
  height: 100%;
  display: flex;
  padding-left: calc(50vw + 50px);
  box-sizing: border-box;
  justify-content: flex-start;
  align-items: center;

  &.active {
    > .wh-shared-left li {
      &:nth-of-type(2) > .avatar > .talk {
        transition: all 1s 0.9s;
        transform: scale(1) !important;
        opacity: 1 !important;
      }

      &:nth-of-type(3) > .avatar > .talk {
        transition: all 1s 0.3s;
        transform: translateX(0);
        opacity: 1;
      }

      &:nth-of-type(3) > .content {
        transition: all 1s 0.6s;
        transform: scale(1);
        opacity: 1;
      }
    }

    > .wh-shared-right {
      h3,
      p,
      > ul > li {
        transform: translateY(0);
        opacity: 1;
      }

      h3 {
        transition: all 1s 0.3s $cubic;
      }

      p {
        transition: all 1s 0.6s $cubic;
      }

      > ul > li {
        transition: all 1s 0.9s $cubic;
      }
    }
  }

  &.out {
    > .wh-shared-right {
      h3,
      p,
      > ul > li {
        transform: translateY(40px);
        opacity: 0;
      }

      h3 {
        transition: all 1s 0.9s $cubic;
      }

      p {
        transition: all 1s 0.6s $cubic;
      }

      > ul > li {
        transition: all 1s 0.3s $cubic;
      }
    }
  }

  > .wh-shared-left {
  }

  > .wh-shared-right {
    width: 482px;
    height: 430px;

    h3,
    p {
      transition: all 1s 0.3s $cubic;
      transform: translateY(40px);
      opacity: 0;
    }

    > ul {
      > li {
        padding-left: 30px;
        width: 459px;
        font-size: 24px;
        font-weight: 100;
        color: #6c7e94;
        line-height: 40px;
        position: relative;
        transition: all 1s 0.6s $cubic;
        transform: translateY(40px);
        opacity: 0;

        &::after {
          content: '';
          position: absolute;
          top: 10px;
          left: 0;
          width: 16px;
          height: 16px;
          border-radius: 8px;
          background-color: #2c8fff;
        }
      }
    }
  }
}
</style>
